
import React from 'react';
import './admin.styl';

import {Layout} from 'antd';
import AuthComponent from '../AuthComponent.js';

import MyHeader from './header';
import MySider from './sidermenu';
// import ContainerHeader from '@/containers/header';
// import ContainerSiderMenu from '@/containers/sidermenu';

import LazyRouter from '../../router';

import {getMenuComponentAndName} from '@/utils/helpers';

class Admin extends AuthComponent {
    constructor(props) {
        super(props);
        this.state = {
            mainMenu:'',
            subMenu:'',
            component:''  //content组件
        }
        this.router = new LazyRouter();
        this.state.component = this.props.match.params.id;
    }
    componentWillReceiveProps(props) {
        let component = props.match.params.id;
        this.state.component = component;
        const { mainMenuName,subMenuName} = getMenuComponentAndName(component);
        this.state.mainMenu = mainMenuName;
        this.state.subMenu = subMenuName;
    }
    getComponent(id) {
        return this.router.getComponent(id);
    }
    render() {
        const {Header,Sider,Content} = Layout;
        let component = this.state.component;
        if(!component) {
            component = 'home';
        }
        return (
            <Layout className="layout">
                <Header className="header">
                    <MyHeader mainMenu={this.state.mainMenu} subMenu={this.state.subMenu}></MyHeader>
                </Header>
                <Layout>
                    <Sider className="sider">
                        <MySider component={component} ></MySider>
                    </Sider>
                    <Content className="content">
                        {
                            this.getComponent(component)
                        }
                    </Content>
                </Layout>
          </Layout>
        );
    }
}

export default Admin;